<template>
	<view class="list">
		<view class="list1">
			<view class="top">
				<view class="top-name">{{list.name}}</view>
				<view class="top-num">{{list.num}}</view>
			</view>
			<view class="middle">{{list.site}}{{list.value}}</view>
			<view class="bun">
				<view class="image" :style="list.select?' border-color: #6edfb8;':''"  @tap="modi">
					<image v-if="list.select" src="../../static/shop/矩形 27 拷贝.png" mode=""></image>
				</view>
				<text>设为默认地址</text>
				<view class="modification" @tap="modification">修改</view>
				<view class="delete" @tap="deletes(list)"> 删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions,mapMutations } from "vuex"
	export default {
		name:"site-list",
		props:{
			list:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			...mapActions(['setsite']),
			...mapMutations(['deletes']),
			modification(){
				// console.log(1111);
				uni.navigateTo({
					url:"/pages/site/site?data="+JSON.stringify(this.list) 
				})
			},
			modi(){
				this.list.select?this.list.select=false:this.list.select=true
				this.setsite(this.list)
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	width: 710rpx;
	height: 230rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
	background-color: #fff;
	.list1{
		width: 670rpx;
		height: 230rpx;
		margin: 0 auto;
	}
}
.top{
	display: flex;
	height: 70rpx;
	width: 670rpx;
	view{
		text-align: center;
		line-height: 70rpx;
	}
	
		.top-name{
			font-size: 28rpx;
			font-weight: 500;
		}
		.top-num{
			margin-left: auto;
		    font-size: 26rpx;
			color: #6a6a6a;
		}
	}
.middle{
	width: 100%;
	height: 90rpx;
	// line-height: 90rpx;
	// padding-top: 10rpx;
	font-size: 26rpx;
	color: #999999;
}
.bun{
	display: flex;
	align-items: center;
	padding-top: 10rpx;
	height: 40rpx;
	width: 100%;
	border-top: 1rpx solid #f7f7f7;
	text{ 
		    margin-left: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
		}
	.image{
		display: flex;
		justify-content: center;
		align-items: center;
		
		width: 30rpx;
		height: 30rpx;
		border-radius: 50rpx;
		border: 1rpx solid #d4d4d4;
		
		image{
			width: 70%;height: 40%;
		}
		
	}
}
.modification{
	margin-left: auto;
	width: 80rpx;
	height: 30rpx;
	border-radius: 8rpx;
	font-size: 22rpx;
	text-align: center;
	line-height: 30rpx;
	border: 1rpx solid #cdcdcd;
	color: #cdcdcd;
}
.delete{
	margin-left: 30rpx;
	width: 80rpx;
	height: 30rpx;
	border-radius: 8rpx;
	
	font-size: 22rpx;
	text-align: center;
	line-height: 30rpx;
	border: 1rpx solid #cdcdcd;
	color: #cdcdcd;
}
</style>